<template>
  <div class="teacher-management">
    <!-- 面包屑导航 -->
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item>系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item class="active">教师管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索和操作区域 -->
    <div class="search-section">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input
            v-model="searchForm.keyword"
            placeholder="教师姓名或手机号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.grade" placeholder="年级" clearable style="width: 120px">
            <el-option label="高一" value="高一" />
            <el-option label="高二" value="高二" />
            <el-option label="高三" value="高三" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.subject"
            placeholder="科目筛选"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.phone"
            placeholder="创建时间筛选"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addTeacher">
            <el-icon><Plus /></el-icon>
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 教师信息表格 -->
    <div class="table-section">
      <el-table
        :data="teacherList"
        style="width: 100%"
        v-loading="loading"
        stripe
        border
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="teacherId" label="编号" width="120" align="center" />
        <el-table-column prop="avatar" label="头像" width="80" align="center">
          <template #default="scope">
            <el-avatar :src="scope.row.avatar" :icon="UserFilled" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式(手机号)" width="150" align="center" />
        <el-table-column prop="name" label="姓名" width="100" align="center" />
        <el-table-column prop="grade" label="年级" width="80" align="center" />
        <el-table-column prop="subject" label="科目" width="80" align="center" />
        <el-table-column prop="description" label="简介" width="200" show-overflow-tooltip />
        <el-table-column prop="workRate" label="作品比例" width="100" align="center">
          <template #default="scope">
            {{ scope.row.workRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" align="center" />
        <el-table-column prop="income" label="纯收入" width="100" align="center">
          <template #default="scope">
            <span style="color: #f56c6c">{{ scope.row.income }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="withdrawn" label="已提现金额" width="120" align="center">
          <template #default="scope">
            <span style="color: #67c23a">{{ scope.row.withdrawn }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="studentCount" label="学生数" width="80" align="center" />
        <el-table-column prop="satisfaction" label="满意数" width="80" align="center" />
        <el-table-column prop="status" label="状态" width="80" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="editTeacher(scope.row)">
              修改
            </el-button>
            <el-button type="danger" size="small" @click="toggleStatus(scope.row)">
              {{ scope.row.status === '启用' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <div class="pagination-info">
        显示第1-4条结果，共4条
      </div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
      <p>Copyright © Assistants, All Rights Reserved.</p>
      <p>Email：1195193361@qq.com WeChat: zz1195193361</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus, UserFilled } from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(4)

// 搜索表单
const searchForm = reactive({
  keyword: '',
  grade: '',
  subject: '',
  phone: ''
})

// 教师列表数据
const teacherList = ref([
  {
    id: '01',
    teacherId: 'gzyw001',
    avatar: '',
    phone: '13013936118',
    name: '杨志强',
    grade: '高一',
    subject: '语文',
    description: '2008年起从事高中语文文学教学，在线教育经验丰富，累计学员超过100万',
    workRate: 10,
    createTime: '2019-07-17 10:10:07',
    income: 10000,
    withdrawn: 9000,
    studentCount: 150,
    satisfaction: 10,
    status: '启用'
  },
  {
    id: '02',
    teacherId: 'gzyw002',
    avatar: '',
    phone: '13013936118',
    name: '江涛',
    grade: '高一',
    subject: '语文',
    description: '2008年起从事高中语文文学教学，在线教育经验丰富，累计学员超过100万',
    workRate: 10,
    createTime: '2019-07-17 10:10:07',
    income: 10000,
    withdrawn: 9000,
    studentCount: 150,
    satisfaction: 10,
    status: '启用'
  },
  {
    id: '03',
    teacherId: 'gzyw003',
    avatar: '',
    phone: '13013936118',
    name: '李理',
    grade: '高一',
    subject: '语文',
    description: '2008年起从事高中语文文学教学，在线教育经验丰富，累计学员超过100万',
    workRate: 10,
    createTime: '2019-07-17 10:10:07',
    income: 10000,
    withdrawn: 9000,
    studentCount: 150,
    satisfaction: 10,
    status: '启用'
  }
])

// 搜索功能
const handleSearch = () => {
  loading.value = true
  // 模拟搜索请求
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

// 新增教师
const addTeacher = () => {
  router.push('/add-teacher-account')
}

// 编辑教师
const editTeacher = (row) => {
  ElMessage.info(`编辑教师：${row.name}`)
}

// 切换状态
const toggleStatus = (row) => {
  const action = row.status === '启用' ? '禁用' : '启用'
  ElMessageBox.confirm(
    `确定要${action}教师 ${row.name} 吗？`,
    `确认${action}`,
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    row.status = action
    ElMessage.success(`${action}成功`)
  }).catch(() => {
    ElMessage.info(`已取消${action}`)
  })
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadTeacherList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadTeacherList()
}

// 加载教师列表
const loadTeacherList = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 组件挂载时加载数据
onMounted(() => {
  loadTeacherList()
})
</script>

<style scoped>
.teacher-management {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.breadcrumb .active {
  color: #409eff;
  font-weight: 600;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-section {
  margin-bottom: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.footer {
  margin-top: 40px;
  text-align: center;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}

.footer p {
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .teacher-management {
    padding: 10px;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .pagination-section {
    flex-direction: column;
    gap: 15px;
  }
}
</style>